<template lang="">
    <div>
        <myheader/>
        <van-form @submit="reg">
                <van-field
                  v-model="form.username"
                  name="username"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                  v-model="form.password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
                />
                <van-field
                v-model="form.mobile"
                name="mobile"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '必须输入手机号' }]"
              />

              <drag-verify 
        :width="width" 
        :height="height" 
        :text="text" 
        :circle="false"
        :success-text="successText" 
        :background="background" 
        :progress-bar-bg="progressBarBg" 
        :completed-bg="completedBg" 
        :handler-bg="handlerBg" 
        :handler-icon="handlerIcon" 
        :text-size="textSize" 
        :success-icon="successIcon"
        ref="Verify"
    >
    </drag-verify>
            
                <div style="margin: 16px;">
                  <van-button round block type="info" native-type="submit" style='width:100px'>提交</van-button>
                </div>
              </van-form>
    </div>
</template>
<script>
//导入头部文件
import myheader from '@/components/myheader'
import dragVerify from 'vue-drag-verify'

export default {
    data() {
        return {
            form:{},
            handlerIcon: "fa fa-angle-double-right",
            successIcon: "fa fa-check",
            background: "#cccccc",
            progressBarBg: "#4b0",
            completedBg: "#66cc66",
            handlerBg: "#fff",
            text: "请将滑块拖动到右侧",
            successText: "验证成功",
            width: 320,
            height: 42,
            textSize: "18px"
        };
  },
  methods: {
    reg() {
      if (this.$refs.Verify.isPassing==true){
        this.axios.post('users/reg',this.form).then(res=>{})
      }else{
        alert('请前往验证')
      }
      
    },
  },
    //注册组件
    components:{
        'myheader':myheader,
        'drag-verify':dragVerify
    }
}
</script>
<style lang="">
    
</style>